<template>
  <view class="container">
    <!-- 背景图 -->
	<view class="bg-image">
		<view class="title">
			科普馆预约
		</view>
		<view class="kongbai"></view>
		<view class="weatherInfo">
			<view class="tempInfo">
				<view 
				class="tempIcon" 
				:style="`background-image: url('../../static/weather/weatherIcon_${tianqitu}.png')`"
				>
				</view>
				<view class="temp">
					{{wendu}}
				</view>
				<view class="PartLine"></view>
			</view>
			<view class="otherInfo">
				<view class="humidness">
					<view class="humidnessIcon"></view>
					<view class="humidnessValue">{{shidu}}</view>
					<view class="humidnessText">湿度</view>
				</view>
				<view class="visibility">
					<view class="visibilityIcon"></view>
					<view class="visibilityValue">{{nengjiandu}}</view>
					<view class="visibilityText">能见度</view>
				</view>
				<view class="wind">
					<view class="windIcon"></view>
					<view class="windValue">{{fengkuang}}</view>
					<view class="windText">风况</view>
				</view>
			</view>
		</view>
	</view>
    <!-- 页面内容 -->
	<view class="content-father">
		<view class="content">
		  <view class="contentTitle">
			  <view class="line"></view>
			  <view class="contentTitle-title">科普馆简介</view>
		  </view>
		  <span class="details">
		  	气象防灾减灾科普教育基地作为信阳首个市级气象主题科普展馆，是河南省气象局和信阳市人民政府深化合作的最新成果。基地设置了气象文化、气象观测、气象服务、5D影院、VR体验、小球大世界、生日气象、虚拟演播厅等多个展示单元，通过丰富的表现形式，集中展示了基础气候知识、区域气候特征、气象观测设备、气象科普趣闻等内容，并兼具突发事件预警信息发布、气象影视制作、人工影响天气指挥等多种功能，实现了气象业务平台与科普设施的有机融合。
		  </span>
		  <view class="addressTitle">
			  <view class="line"></view>
			  <view class="addressTitle-title">科普馆地址</view>
		  </view>
		  <span class="address">
			  信阳市平桥区龙飞山路与新二十八大街交叉口东南100米
		  </span>
		  <video
			class="video"
			src="/static/video/kepuguan.mp4" 
			controls
		  ></video>  
		  <view class="subscribe">
			<view class="subscribeTitle">
				<view class="line"></view>
				<view class="subscribe-title">科普馆预约</view>
				<view class="option">
					<up-subsection :list="list" mode="subsection" fontSize="26rpx" activeColor="#468BFB" inactiveColor="#468BFB" :current="curNow" @change="sectionChange"></up-subsection>
				</view>
			</view>
			<view class="phoneSubscribe" v-if="curNow==1">
				<view class="phoneInfo">
					<view class="phone">
						预约电话
					</view>
					<view class="phoneNumber">
						0376—6689280
					</view>
				</view>
				<view class="subscribeButton">
					<up-button type="primary" class="custom-style" text="电话预约" @click="subscribeCall"></up-button>
			    </view>
			</view>
			<view class="onlineSubscribe" v-if="curNow==0">
				<view class="option">
					<view class="name">
						<view class="star">
							*
						</view>
						<view class="numberText">
							申请人姓名	
						</view>
						<view class="numberValue">						
							<up-input
							  placeholder="请输入您的姓名"
							  border="surround"
							  v-model="subscribeName"
							  type="text"
							  @blur="handleBlurName"
							></up-input>
							<view class="hint" v-if="showName">
							  {{ nameMessage }}
							</view>
						</view>
					</view>
					<view class="unit">
						<view class="star">
							*
						</view>
						<view class="numberText">
							所在单位	
						</view>
						<view class="numberValue">						
							<up-input
							  placeholder="请输入您的单位"
							  border="surround"
							  v-model="subscribeUnit"
							  type="text"
							  @blur="handleBlurUnit"
							></up-input>
							<view class="hint" v-if="showUnit">
							  {{ unitMessage }}
							</view>
						</view>
					</view>
					<view class="time">
						<view class="star">
							*
						</view>
						<view class="timeText">
							时间选择
						</view>
						<view class="timeValue">
							<view class="time">
								<up-input
								  placeholder="请选择预约时间"
								  border="surround"
								  mode="datetime"
								  v-model="subscribeTime"
								  @focus="showSubscribeTime"
								  @blur="handleBlurTime"
								></up-input>
							</view>
							<view class="hint" v-if="showTime">
							  {{ timeMessage }}
							</view>
						</view>
					</view>
					<view class="number">
						<view class="star">
							*
						</view>
						<view class="numberText">
							输入人数		
						</view>
						<view class="numberValue">						
							<up-input
							  placeholder="请输入预约人数(20-200人)"
							  border="surround"
							  v-model="subscribeNum"
							  type="number"
							  @blur="handleBlurNum"
							></up-input>
							<view class="hint" v-if="showHint">
							  {{ hintMessage }}
							</view>
						</view>
					</view>
					<view class="phone">
						<view class="star">
							*
						</view>
						<view class="timeText">
							联系方式
						</view>
						<view class="timeValue">
							<up-input
							  placeholder="请输入联系方式"
							  border="surround"
							  v-model="phone"
							  type="number"
							  @blur="validatePhone"
							></up-input>
							<view v-if="error" class="error-text">{{ error }}</view>
						</view>
					</view>
				</view>
				<view class="subscribeButton">
					<up-button type="primary" class="custom-style" text="立即预约" @click="openSubscribe"></up-button>
				</view>
			</view>
		  </view>
		</view>
	</view>
  </view>
  <!-- 协议弹窗 -->
  <up-popup :show="showAgreement" mode="center" :round="15" class="agreement-popup">
	  <view class="agreement-title">参观须知</view>
	  <view class="agreement-content">
		  <view class="agreement-rule">1.服从科普馆工作人员管理，避免拥挤聚集，在开放展厅范围内参观，不得随意进入非开放区域；</view>
		  <view class="agreement-rule">2.线上预约时请留下准确手机号码，如遇突发情况我们需要提前打电话进行沟通；</view>
		  <view class="agreement-rule">3.参观团体人数集合完毕后，方可统一入馆；</view>
		  <view class="agreement-rule">4.老、幼、孕等特殊观众请由亲友陪同参观，并注意安全；</view>
		  <view class="agreement-rule">5.文明参观，请勿用手触摸展品及展览设备以及攀爬、躺卧；</view>
		  <view class="agreement-rule">6.严禁携带易燃易爆，管制械具等危险品入馆；馆内严禁吸烟、饮食、喧哗等；严禁穿滚轴鞋及各式轮滑鞋等，防止摔伤或撞伤他人；</view>
		  <view class="agreement-rule">7.请观众妥善看管自身衣物及贵重物品，发生丢失或盗窃，本馆恕不承担法律责任；</view>
		  <view class="agreement-rule">8.如遇各类突发情况，请服从工作人员指挥。</view>
	  </view>
	  <view class="countdown">请阅读 <text class="countdown-number">{{ countdown }}</text> 秒后继续</view>
	  <up-button 
		  class="next-button" 
		  :class="{ active: countdown === 0 }" 
		  :disabled="countdown > 0"
		  @click="showSuccessPopup"
	  >
		  {{ countdown > 0 ? `请阅读${countdown}秒` : '下一步' }}
	  </up-button>
  </up-popup>
  <!-- 原预约成功弹窗 -->
  <up-popup class="popupBox" :show="showSubscribe" mode="center" :round="10">
  	<image src="/static/yuyue.png" mode="widthFix"></image>
  	<view class="title1">预约成功</view>
  	<view class="title2">请当天按时参加活动</view>
  	<up-button type="primary" class="custom-style" text="我知道了" @click="closeSubscribe"></up-button>
  </up-popup>
  <!-- 预约时间选择弹窗 -->
  <view class="modal-overlay" v-if="showPicker">
      <view class="container-box">
        <view class="header">
          <view class="header-title">选择预约时间</view>
          <view class="header-subtitle">请选择未来2周内的工作日进行预约</view>
        </view>
  
        <view class="date-section">
          <view class="date-title">
            <text>选择日期</text>
          </view>
          <view class="date-picker">
            <view
              v-for="date in dateOptions"
              :key="date.date"
              class="date-item"
              :class="{ active: selectedDate === date.date, disabled: date.disabled }"
              @click="selectDate(date)"
            >
              <view class="weekday">{{ date.display.weekday }}</view>
              <view class="day">{{ date.display.day }}</view>
              <view class="date-num">{{ date.display.month }}/{{ date.display.day }}</view>
              <view v-if="date.disabled" class="tooltip">
                <view class="tooltiptext">{{ getHolidayTooltip(date) }}</view>
              </view>
            </view>
          </view>
        </view>
  
        <view class="time-section">
          <view class="time-title">
            <text>选择时间段</text>
          </view>
          <view v-if="isLoading" class="loading">
             加载中...
          </view>
          <block v-else>
            <view class="period">
              <view class="period-title">上午时段</view>
              <view class="time-slots">
                <view
                  v-for="slot in timeSlots.filter(s => s.period === '上午')"
                  :key="slot.id"
                  class="time-btn"
                  :class="{
                    active: selectedTimeSlot && selectedTimeSlot.id === slot.id,
                    disabled: isTimeSlotBooked(selectedDate, slot.start)
                  }"
                  @click="selectTimeSlot(slot)"
                >
                  {{ slot.display }}
                  <text v-if="isTimeSlotBooked(selectedDate, slot.start)" class="booked-text">（已约满）</text>
                  <view v-if="isTimeSlotBooked(selectedDate, slot.start)" class="tooltip">
                    <view class="tooltiptext">已被预约</view>
                  </view>
                </view>
              </view>
            </view>
  
            <view class="period">
              <view class="period-title">下午时段</view>
              <view class="time-slots">
                <view
                  v-for="slot in timeSlots.filter(s => s.period === '下午')"
                  :key="slot.id"
                  class="time-btn"
                  :class="{
                    active: selectedTimeSlot && selectedTimeSlot.id === slot.id,
                    disabled: isTimeSlotBooked(selectedDate, slot.start)
                  }"
                  @click="selectTimeSlot(slot)"
                >
                  {{ slot.display }}
                  <text v-if="isTimeSlotBooked(selectedDate, slot.start)" class="booked-text">（已约满）</text>
                  <view v-if="isTimeSlotBooked(selectedDate, slot.start)" class="tooltip">
                    <view class="tooltiptext">已被预约</view>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
  
        <view class="action-section">
          <view class="selected-time-display">已选: <text>{{ selectedTimeText }}</text></view>
          <view class="buttons">
            <button class="cancel-btn" @click="cancelSelection">取消</button>
            <button class="confirm-btn" :disabled="isConfirmDisabled" @click="confirmSelection">确认</button>
          </view>
        </view>
  
        <view class="holiday-note">
          <text class="iconfont icon-exclamation-circle"></text>
          <!-- 注：标记<span style="color: #ff4757; font-weight: 500">斜线</span>的日期为周末或节假日，不可预约 -->
		  温馨提示：周日和周一闭馆休息，法定节假日不可预约
        </view>
      </view>
   </view>
</template>

<script setup>	
import { ref, computed, onMounted, watch, reactive } from 'vue';
import common from '@/static/js/common.js'
import { onLoad } from '@dcloudio/uni-app'

//联系方式
const phone= ref('');
const error = ref('');
//手机号格式验证程序
const validatePhone = () => {
  const regex = /^1[3-9]\d{9}$/;
  if (!phone.value) {
    error.value = '请输入手机号';
  } else if (!regex.test(phone.value)) {
    error.value = '请输入正确的11位手机号';
  } else {
    error.value = '';
  }
};

// 校验函数（返回 true/false）
const checkPhoneValid = () => {
  const regex = /^1[3-9]\d{9}$/;
  if (!phone.value.trim()) {
    error.value = '请输入手机号';
    return false;
  }
  if (!regex.test(phone.value)) {
    error.value = '请输入正确的11位手机号';
    return false;
  }
  error.value = '';
  return true;
};

const checkSubscribeValid = () => {
  if (!subscribeName.value.trim() || !subscribeUnit.value.trim()) {
    error.value = '订阅名称和单位都不能为空';
    return false;
  }
  error.value = '';
  return true;
};

//两种预约方式切换
const list = ref(['线上预约', '电话预约']);  
const curNow = ref(0);  
const sectionChange = (index) => {  
  curNow.value = index;
  console.log(curNow.value)
} 
 
//预约时间//////////////////////////////////////////////////////////////////////////
// 弹出预约时间选择框函数
const subscribeTime = ref('')

const showSubscribeTime = ()=>{
	//打开预约时间窗口
	showPicker.value = true
	generateDateOptions();
	fetchBookedSlots();
}

const showPicker = ref(false)

const emit = defineEmits(['confirm', 'cancel']);


// 日期数据
const dateOptions = ref([]);
const selectedDate = ref(null);

// 时间段数据
const timeSlots = reactive([
  { id: 1, period: '上午', start: '09:00', end: '10:00', display: '9:00-10:00' },
  { id: 2, period: '上午', start: '10:00', end: '11:00', display: '10:00-11:00' },
  { id: 3, period: '下午', start: '15:10', end: '16:10', display: '15:10-16:10' },
  { id: 4, period: '下午', start: '16:10', end: '17:10', display: '16:10-17:10' }
]);

const selectedTimeSlot = ref(null);
const bookedSlots = ref([]);
const isLoading = ref(true);

// 计算属性
const isConfirmDisabled = computed(() => {
  return !selectedDate.value || !selectedTimeSlot.value;
});

const selectedTimeText = computed(() => {
  if (!selectedDate.value || !selectedTimeSlot.value) return '暂无选择';
  
  const formattedDate = formatDisplayDate(selectedDate.value);
  return `${formattedDate} ${selectedTimeSlot.value.display}`;
});

// 动态加载 json 文件
const loadDisabledDates = async () => {
  try {
    const response = await uni.request({
      url: '/static/json/holidays.json',
      method: 'GET'
    });
    return response.data.disabled_dates || [];
  } catch (error) {
    console.error('加载禁止日期失败:', error);
    return [];
  }
};

// 生成未来2周内的预约日期
const generateDateOptions = async () => {
  const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
  const today = new Date();
  dateOptions.value = [];

  // 动态加载禁止日期
  const disabledDates = await loadDisabledDates();

  for (let i = 0; i < 14; i++) {
    const date = new Date();
    date.setDate(today.getDate() + i);

    const weekday = days[date.getDay()];
    const day = date.getDate();
    const month = date.getMonth() + 1;
    const year = date.getFullYear();
    const dateString = formatDate(date);
	
    // 今天不能选，周末不能选，自定义禁止日期也不能选
    const isToday = i === 0;
    const isWeekend = date.getDay() === 0 || date.getDay() === 1;
    const isCustomDisabled = disabledDates.includes(dateString);
    const isDisabled = isToday || isWeekend || isCustomDisabled;

    dateOptions.value.push({
      date: dateString,
      display: {
        weekday,
        day,
        month,
        year
      },
      disabled: isDisabled,
      isWeekend: isWeekend,
      isToday: isToday,
      isCustomDisabled: isCustomDisabled
    });

    // 默认选择第一个可用的日期（不是今天、不是周末、不是自定义禁止日期）
    if (i > 0 && !isDisabled && !selectedDate.value) {
      selectedDate.value = dateString;
    }
  }
  
  // 如果没有找到可用日期，默认选择第一个非今天的日期
  if (!selectedDate.value) {
    const firstAvailableDate = dateOptions.value.find(date => !date.disabled);
    if (firstAvailableDate) {
      selectedDate.value = firstAvailableDate.date;
    }
  }
};

// 格式化日期为YYYY-MM-DD
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 格式化显示日期
const formatDisplayDate = (dateString) => {
  const date = new Date(dateString);
  const month = date.getMonth() + 1;
  const day = date.getDate();
  return `${month}月${day}日`;
};

// 检查时间段是否已被预约
const isTimeSlotBooked = (date, startTime) => {
  return bookedSlots.value.some(slot => 
    slot.date === date && slot.startTime === startTime
  );
};

// 选择日期
const selectDate = (date) => {
  if (date.disabled) return;
  selectedDate.value = date.date;
  selectedTimeSlot.value = null;
};

// 选择时间段
const selectTimeSlot = (slot) => {
  if (isTimeSlotBooked(selectedDate.value, slot.start)) return;
  selectedTimeSlot.value = slot;
};

// 获取私下预约数据
const fetchBookedSlots = async () => {
  isLoading.value = true;
  
  try {
    // API请求
    const response = await uni.request({
      url: 'http://218.28.7.243:32201/api/science/lastRecords',
      method: 'GET',
    });
	
    // 检查响应是否成功
    if (response.statusCode === 200 && response.data.success) {
      // 处理接口返回的数据
      const apiData = response.data.data;
      
      // 转换数据格式
      const transformedBookedSlots = apiData.map(item => {
        // 从 orderTime 中提取日期和时间
        const orderTime = new Date(item.orderTime);
        const dateStr = formatDate(orderTime); // 转换为 yyyy-MM-dd 格式
        const timeStr = orderTime.toTimeString().substring(0, 5); // 提取 HH:mm 格式
        
        return {
          date: dateStr,
          startTime: timeStr,
          endTime: timeStr, 
          orderId: item.id,
          orderNum: item.orderNum
        };
      });
      
      bookedSlots.value = transformedBookedSlots;
    } else {
      console.error('获取预约数据失败:', response);
      // 请求失败
      uni.showToast({
        title: '获取预约数据失败，请联系管理员', // 提示内容
        icon: 'loading', // 图标，可选值: success, loading, none
        duration: 3000, // 显示时长(ms)，默认1500
        position: 'center' // 位置，可选值: top, center, bottom
      });
    }
  } catch (error) {
    console.error('请求预约数据时发生错误:', error);
    // 如果请求出错
	uni.showToast({
	  title: '系统故障，请联系管理员', // 提示内容
	  icon: 'loading', // 图标，可选值: success, loading, none
	  duration: 3000, // 显示时长(ms)，默认1500
	  position: 'center' // 位置，可选值: top, center, bottom
	});
    
  } finally {
    isLoading.value = false;
  }
};

// 确认选择
const confirmSelection = () => {
  if (!selectedDate.value || !selectedTimeSlot.value) return;

  // 获取选择的日期和时间
  const selectedDateStr = selectedDate.value;
  const selectedTimeStr = selectedTimeSlot.value.start;
  
  // 组合成完整的时间格式 yyyy-MM-dd HH:mm:ss
  subscribeTime.value = `${selectedDateStr} ${selectedTimeStr}:00`;
  
  console.log('最终选择的时间:', subscribeTime.value); 
  
  emit('confirm', subscribeTime.value);
  selectedTimeSlot.value = null;
  
  //关闭窗口
  showPicker.value = false
  
};

// 取消选择
const cancelSelection = () => {
  emit('cancel');
  selectedTimeSlot.value = null;
  //关闭窗口
  showPicker.value = false
};

// 获取节假日提示文本
const getHolidayTooltip = (date) => {
  if (date.isToday) {
    return '今天不可选';
  }
  if (date.isCustomDisabled) {
    return '暂不开放';
  }
  if (date.isWeekend) {
    return '周末';
  }
  return '';
};


///////////////////////////////////////////////////////////////////////////////////
//判断预约人数
const subscribeNum = ref('');
const showHint = ref(false);
const hintMessage = ref('');
//判断预约姓名
const subscribeName = ref('');
const showName = ref(false);
const nameMessage = ref('');
//判断预约单位
const subscribeUnit = ref('');
const showUnit = ref(false);
const unitMessage = ref('');
//判断预约时间
const showTime = ref(false);
const timeMessage = ref('');

// 处理预约人数输入框失焦事件
const handleBlurNum = () => {
  // 预约人数
  const trimmedValue = subscribeNum.value.trim();
  // 如果为空或非数字，设置为默认值20
  if (trimmedValue === '' || isNaN(Number(trimmedValue))) {
    subscribeNum.value = '20';
    showHint.value = true;
    hintMessage.value = '已设置为默认人数20';
    
    const timer = setTimeout(() => {
      showHint.value = false;
      clearTimeout(timer);
    }, 2000);
    return;
  }
  
  // 转换为数字
  const numValue = Number(trimmedValue);
  
  // 验证范围 (20-200)
  if (numValue < 20) {
    subscribeNum.value = '20';
    showHint.value = true;
    hintMessage.value = '人数少于20人，已自动设置为20人';
    
    const timer = setTimeout(() => {
      showHint.value = false;
      clearTimeout(timer);
    }, 2000);
    return;
  }
  
  if (numValue > 200) {
    subscribeNum.value = '200';
    showHint.value = true;
    hintMessage.value = '人数超过200人，已自动设置为200人';
    
    const timer = setTimeout(() => {
      showHint.value = false;
      clearTimeout(timer);
    }, 2000);
    return;
  }
};

// 处理预约姓名输入框失焦事件
const handleBlurName = () => {
  // 预约姓名
  const nameValue = subscribeName.value.trim();
  // 判断预约姓名
  if (nameValue === '') {
    showName.value = true;
    nameMessage.value = '请输入申请人姓名';
    
    const timerName = setTimeout(() => {
      showName.value = false;
      clearTimeout(timerName);
    }, 2000);
    return;  
  } 
}; 

// 处理预约单位输入框失焦事件
const handleBlurUnit = () => {
  // 预约单位
  const unitValue = subscribeUnit.value.trim();
  // 判断预约单位
  if (unitValue === '') {
    showUnit.value = true;
    unitMessage.value = '请输入申请单位';
    
    const timerUnit = setTimeout(() => {
      showUnit.value = false;
      clearTimeout(timerUnit);
    }, 2000);
    return;
  }
};

// 处理预约时间输入框失焦事件
const handleBlurTime = () => {
  // 预约单位
  const timeValue = subscribeTime.value;
  // 判断预约单位
  if (timeValue === '') {
    showTime.value = true;
    timeMessage.value = '请选择预约时间';
    
    const timerTime = setTimeout(() => {
      showTime.value = false;
      clearTimeout(timerTime);
    }, 2000);
    return;
  }
};

//电话预约
const subscribeCall =()=>{
	uni.makePhoneCall({
		phoneNumber: '0376—6689280'
	});
}
//预约弹出框
const showAgreement = ref(false)
const showSubscribe = ref(false)
const countdown = ref(5);

let countdownInterval = null;
//预约成功弹出框
const showSuccessPopup = () => {
	if (countdown.value === 0) {
		showAgreement.value = false;
		showSubscribe.value = true;
	}
};

// 判断日期时间格式的函数
const isValidDateTime = (subscribeTime) => {
  // 检查是否为空（null、undefined、空字符串）
  if (!subscribeTime || typeof subscribeTime !== 'string') {
    return false
  }

  // 正则表达式匹配 yyyy-MM-dd HH:mm:ss 格式
  const regex = /^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/
  const match = subscribeTime.match(regex)

  if (!match) {
    return false
  }

  // 提取年、月、日、时、分、秒
  const year = parseInt(match[1], 10)
  const month = parseInt(match[2], 10)
  const day = parseInt(match[3], 10)
  const hour = parseInt(match[4], 10)
  const minute = parseInt(match[5], 10)
  const second = parseInt(match[6], 10)

  // 使用 Date 验证日期是否合法
  const date = new Date(year, month - 1, day, hour, minute, second)

  // 检查构造出的日期是否与输入一致
  if (
    date.getFullYear() !== year ||
    date.getMonth() !== month - 1 ||
    date.getDate() !== day ||
    date.getHours() !== hour ||
    date.getMinutes() !== minute ||
    date.getSeconds() !== second
  ) {
    return false
  }

  return true
}

//立即预约函数
const openSubscribe =()=>{
	//判断用户输入的预约人数是否符合要求
	const isValid = Number(subscribeNum.value) >= 20 && Number(subscribeNum.value) <= 200;
	const isTrue = isValid && checkPhoneValid() && checkSubscribeValid() && isValidDateTime(subscribeTime.value)
	
	// 判断预约人和预约单位信息
	if(!isTrue){
		uni.showToast({
		  title: '请输入完整的预约信息',
		  icon: 'none',     // 不显示图标
		  duration: 3000
		});
		return
	}
	
	//向服务器发送请求
	uni.request({
	  url: 'http://218.28.7.243:32201/api/science/reserve', // 请求URL
	  method: 'POST',
	  header: {
	    'Access-Control-Allow-Origin': '*',
	  },
	  data: {
		name: subscribeName.value,
	    orderNum: parseInt(subscribeNum.value, 10),
	    orderTime: subscribeTime.value,
	    phoneNum: phone.value,
		unit: subscribeUnit.value,
		wxId: subscribeName.value //暂时用申请人姓名代替
	  },
	  success: (res) => {
		if(res.data.code==200){
			showAgreement.value = true
			countdown.value = 5;            
			// 开始倒计时
			countdownInterval = setInterval(() => {
				if (countdown.value > 0) {
					countdown.value--;
				} else {
					clearInterval(countdownInterval);
				}
			}, 1000);
		}
	    console.log('请求成功:', res);
	  },
	  fail: (err) => {
		uni.showToast({
		  title: '预约失败,请稍后再试或与管理员联系',
		  icon: 'none',     // 不显示图标
		  duration: 3000
		});
	  },
	  complete: () => {
	    console.log('请求完成');
	  }
	});
	
}
const closeSubscribe =()=>{
	showSubscribe.value = false
	// 清空预约信息
	subscribeName.value = ''
	subscribeUnit.value = ''
	subscribeTime.value = ''
	subscribeNum.value = ''
	phone.value = ''
	
}
// 天气实况
const wendu = ref('')
const shidu = ref('')
const fengkuang = ref('')
const nengjiandu = ref('')
const tianqitu = ref('')
// 初始化完成
onLoad(async()=>{
	//第一个请求接口
	let query = {
		code: '57297',
		time: common.getCurrentFormattedDateTime() //当前时间
	}
	await uni.request({
		url: `http://218.28.7.243:10003/Weather/ZDZ?u=APPUSE&p=0690affb28cf9b9774785ac680d44ca3&projectname=&calltype=4&iquery=ZDZ.GetDataByStationCodesAndWeatherKeys|1|String;tenminute|String;${query.code}|String;airtemp_current,wind_tenminuteave,visibility_current|DateTime;${query.time}`, //仅为示例，并非真实接口地址。
		success: (res) => {
			let data = res.data.Rows[0]
			wendu.value = Math.round(data.AIRTEMP_CURRENT_VALUE)+'℃'; //当前温度
			fengkuang.value = common.getWindDirection(data.WIND_TENMINUTE_DIRVALUE,data.WIND_TENMINUTE_SPEEDVALUE)+'风'+data.WIND_TENMINUTE_POWERVALUE + '级'; 
			nengjiandu.value = (data.VISIBILITY_CURRENT_VALUE/1000).toFixed(2)+'km' //当前能见度
		}
	});
	//第二个请求接口
	let currentDate = new Date(); //获取当前时间
	let year = currentDate.getFullYear();
	let month = String(currentDate.getMonth() + 1).padStart(2, "0");
	let day = String(currentDate.getDate()).padStart(2, "0");
	let hours = String(currentDate.getHours()).padStart(2, "0");
	let mins = String(currentDate.getMinutes()).padStart(2, "0");
	let seconds = String(currentDate.getSeconds()).padStart(2, "0");
	let startTime = new Date(
		year + "-" + month + "-" + day + " " + hours + ":00:00"
	);
	let times = startTime.getTime();
	let querys = {
		beginTime: common.parseTime(times), //查询起始时间
		endTime: common.parseTime(times + 3600000), //查询结束时间
		interhour: 1, //时效间隔（1、3、6、12、24）
		// lon: uni.getStorageSync('longitude'), //具体经度,多个以逗号隔开
		// lat: uni.getStorageSync('latitude'), //具体纬度,多个以逗号隔开
	};
	await uni.request({
		url: `http://218.28.7.243:10003/Weather/NWP?u=APPUSE&p=0690affb28cf9b9774785ac680d44ca3&projectname=&calltype=4&iquery=Stream.GetJxhByTypeCodeAndTimeRangeAndLocation|1|String;JXH_HN|Int32;${querys.interhour || 3}|DateTime;${querys.beginTime}|DateTime;${querys.endTime}|String;114.0433|String;32.1372&tk=${Date.now()}`,
		success: (res) => {
			let arr = res.data[0].elementlist[0];
			if (arr && arr.elementvalue) {
				shidu.value = Math.round(arr.elementvalue[2]) + '%'; //湿度
				tianqitu.value = common.formatWeather(arr.elementvalue[0], 1)
			}
		}
	});
})

</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  // height: 1968rpx;
  .bg-image {
    position: relative;
    width: 100%;
    z-index: -1;
	background-image: url('/static/科普馆.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	.title{
		position: relative;
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: Medium;  
		font-family: PingFangSC, PingFang SC;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		box-sizing: border-box;
		padding: 80rpx 60rpx;
	}
	.kongbai{
		position: relative;
		width: 100%;
		// height: 310rpx;
		height: 200rpx;
	}
	.weatherInfo{
		  position: relative;
		  width: 100%;
		  height: 156rpx;
		  background: linear-gradient( 180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.78) 100%);
		  display: flex;
		  .tempInfo{
			  height: 100%;
			  flex: 1;
			  display: flex;
			  .tempIcon{
				  flex: 1;
				  height: 100%;
				  background-repeat: no-repeat;
				  background-position: center;
				  background-size: auto 65%;
			  }
			  .temp{
				  flex: 1;
				  height: 100%;
				  font-family: PingFangSC, PingFang SC;
				  font-weight: 500;
				  font-size: 44rpx;
				  color: #FFFFFF;
				  font-style: normal;  			  
				  display: flex;
				  justify-content: center; /* 水平居中 */
				  align-items: center; /* 垂直居中 */
			  }
			  .PartLine {
			    flex: 0.01;
			    position: relative; /* 为伪元素提供定位参考 */
			  }
			  .PartLine::before {
			    content: '';
			    position: absolute;
			    top: 50%; /* 顶部对齐容器中心 */
			    left: 0;
			    height: 60%; /* 高度为容器的60% */
			    transform: translateY(-50%); /* 向上移动自身高度的50%，实现居中 */
			    border-left: 2rpx solid #FFFFFF;
			  }
		  }
		  .otherInfo{
			  height: 100%;
			  flex: 2; 
			  display: flex;
			  .humidness{
				  height: 100%;
				  flex: 1;
				  display: flex;
				  flex-direction: column;
				  .humidnessIcon{
					  flex: 1;
					  background-image: url('/static/湿度.png');
					  background-repeat: no-repeat;
					  background-position: center;
					  background-size: auto 70%;
				  }
				  .humidnessValue{
					  flex: 1;
					  font-family: DINAlternate, DINAlternate;
					  font-weight: bold;
					  font-size: 30rpx;
					  color: #FFFFFF;
					  font-style: normal;					 
					  display: flex;
					  justify-content: center;
					  align-items: center;
				  }
				  .humidnessText{
					  flex: 1;
					  font-family: PingFangSC, PingFang SC;
					  font-weight: 400;
					  font-size: 24rpx;
					  color: rgba(255,255,255,0.7);
					  text-align: center;
					  font-style: normal;
					  display: flex;
					  justify-content: center;
					  align-items: center;
				  }
			  }
			  .visibility{
				  height: 100%;
				  flex: 1;
				  display: flex;
				  flex-direction: column;
				  .visibilityIcon{
					  flex: 1;
					  background-image: url('/static/能见度.png');
					  background-repeat: no-repeat;
					  background-position: center;
					  background-size: auto 70%;
				  }
				  .visibilityValue{
					  flex: 1;
					  font-family: DINAlternate, DINAlternate;
					  font-weight: bold;
					  font-size: 30rpx;
					  color: #FFFFFF;
					  font-style: normal;
					  display: flex;
					  justify-content: center;
					  align-items: center;
				  }
				  .visibilityText{
					  flex: 1;
					  font-family: PingFangSC, PingFang SC;
					  font-weight: 400;
					  font-size: 24rpx;
					  color: rgba(255,255,255,0.7);
					  font-style: normal;
					  display: flex;
					  justify-content: center;
					  align-items: center;
				  }
			  }
			  .wind{
				  height: 100%;
				  flex: 1;
				  display: flex;
				  flex-direction: column;
				  .windIcon{
					  flex: 1;
					  background-image: url('/static/风.png');
					  background-repeat: no-repeat;
					  background-position: center;
					  background-size: auto 70%;
				  }
				  .windValue{
					  flex: 1;
					  font-family: PingFangSC, PingFang SC;
					  font-weight: 600;
					  font-size: 24rpx;
					  color: #FFFFFF;
					  font-style: normal;
					  display: flex;
					  justify-content: center;
					  align-items: center;
				  }
				  .windText{
					  flex: 1;
					  font-family: PingFangSC, PingFang SC;
					  font-weight: 400;
					  font-size: 24rpx;
					  color: rgba(255,255,255,0.7);
					  font-style: normal;
					  display: flex;
					  justify-content: center;
					  align-items: center;
				  }
			  }
		   }
	}
  }
  .content-father{
	  background: rgb(17,33,41) ;
	  .content {
	  	position: relative;
	  	width: 100%;
	  	box-sizing: border-box;
	  	padding: 30rpx 30rpx; // 添加内边距，防止内容紧贴边框
	  	// height: 1311rpx;
	  	background-color: #FFFFFF;
	  	border-top-right-radius: 50rpx;
	  	border-top-left-radius: 50rpx;
	  	.contentTitle {
	  	  position: relative;
	  	  width: 100%;
	  	  height: 50rpx;
	  	  display: flex;
	  	  align-items: center;
	  	  .line {
	  	    width: 6rpx;
	  	    height: 28rpx;
	  	    background: #468BFB;
	  	    border-radius: 0 12rpx 12rpx 0;
	  	    margin-right: 10rpx;
	  	    flex-shrink: 0; // 防止线条被压缩
	  	  } 
	  	  .contentTitle-title {
	  	    height: 28rpx;
	  	    overflow: hidden;
	  	    white-space: nowrap;
	  	    text-overflow: ellipsis;
	  	    font-family: PingFangSC, PingFang SC;
	  	    font-weight: 800;
	  	    font-size: 28rpx; 
	  	    color: #181818;
	  	    line-height: 28rpx;
	  		text-align: left;
	  		font-style: normal;
	  	  }
	  	}
	  	.details{
	  		position: relative;
	  		display: inline-block;
	  		box-sizing: border-box;
	  		width: 100%;
	  		// height: 360rpx;
	  		font-family: PingFangSC, PingFang SC;
	  		font-weight: 400;
	  		font-size: 26.5rpx;
	  		color: #181818;
	  		// line-height: 40rpx;
	  		text-align: left;
	  		font-style: normal;
	  		text-indent: 2em;
	  	}
		.addressTitle {
		  position: relative;
		  width: 100%;
		  height: 50rpx;
		  display: flex;
		  align-items: center;
		  margin: 10rpx 0;
		  .line {
		    width: 6rpx;
		    height: 28rpx;
		    background: #468BFB;
		    border-radius: 0 12rpx 12rpx 0;
		    margin-right: 10rpx;
		    flex-shrink: 0; // 防止线条被压缩
		  } 
		  .addressTitle-title {
		    height: 28rpx;
		    overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis;
		    font-family: PingFangSC, PingFang SC;
		    font-weight: 800;
		    font-size: 28rpx; 
		    color: #181818;
		    line-height: 28rpx;
			text-align: left;
			font-style: normal;
		  }
		}
		.address{
			position: relative;
			display: inline-block;
			box-sizing: border-box;
			width: 100%;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26.5rpx;
			color: #181818;
			text-align: left;
			font-style: normal;
		}
		.video{		
			width: 100%; 		
			border-radius: 20rpx; 
			margin: 30rpx auto;
		}
	  	.subscribe{
	  		position: relative;
	  		width: 100%;
	  		// height: 368rpx;
	  		box-sizing: border-box;
	  		padding: 20rpx 30rpx;
	  		background: #FFFFFF;
	  		border-radius: 10rpx;
	  		box-shadow: 0rpx 4rpx 18rpx 4rpx rgba(127,156,255,0.15);
	  		.subscribeTitle{
	  			position: relative;
	  			height: 56rpx;
	  			width: 100%;
	  			box-sizing: border-box;
	  			margin-bottom: 20rpx;
	  			display: flex;
	  			align-items: center;
	  			.line{
	  				width: 6rpx;
	  				height: 28rpx;
	  				background: #468BFB;
	  				border-radius: 0rpx 4rpx 4rpx 0rpx;
	  			}
	  			.subscribe-title{
	  				width: 250rpx;
	  				height: 28rpx;
	  				font-family: PingFangSC, PingFang SC;
	  				font-weight: 800;
	  				font-size: 30rpx;
	  				color: #181818;
	  				line-height: 28rpx;
	  				text-align: left;
	  				font-style: normal;
	  				margin-left: 10rpx;
	  			}
	  			.option{
	  				width: 288rpx;
	  				height: 56rpx;
	  				margin-left: auto;
	  			}
	  		}
	  		.phoneSubscribe{
	  			position: relative;
	  			width: 100%;
	  			display: flex;
	  			flex-direction: column;
	  			align-items: center;
	  			justify-content: center;
	  			.phoneInfo{
	  				position: relative;
	  				width: 100%;
	  				display: flex;
	  				align-items: center;
	  				margin: 50rpx 0;
	  				.phone{
	  					width: 224rpx;
	  					font-family: PingFangSC, PingFang SC;
	  					font-weight: 400;
	  					font-size: 32rpx;
	  					color: #666666;
	  					line-height: 32rpx;
	  					text-align: left;
	  					font-style: normal;
	  				}
	  				.phoneNumber{
	  					width: 414rpx;
	  					margin-left: auto;
	  					font-family: PingFangSC, PingFang SC;
	  					font-weight: 400;
	  					font-size: 32rpx;
	  					color: #333333;
	  					line-height: 32rpx;
	  					text-align: right;
	  					font-style: normal;
	  				}
	  			}
	  			.subscribeButton{
	  				width: 640rpx;
	  				height: 100rpx;
	  				.custom-style{
	  					background: linear-gradient( 180deg, #6FA4FD 0%, #468BFA 100%);
	  					border-radius: 16rpx;
	  					font-family: PingFangSC, PingFang SC;
	  					font-weight: 400;
	  					font-size: 34rpx;
	  					color: #FFFFFF;
	  					line-height: 48rpx;
	  					text-align: right;
	  					font-style: normal;
	  				}
	  			}
	  		}
	  		.onlineSubscribe{
	  			position: relative;
	  			width: 100%;
	  			display: flex;
	  			flex-direction: column;
	  			align-items: center;
	  			justify-content: center;
	  			.option{
	  				width: 100%;
	  				height: 450rpx;
	  				display: flex;
	  				flex-direction: column;
					.name{
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
						.star{
							width: 18rpx;
							height: 52rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #F95957;
							line-height: 52rpx;
							text-align: left;
							font-style: normal;
						}
						.numberText{
							flex: 1;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 32rpx;
							color: #666666;
							line-height: 65rpx;
							text-align: left;
							font-style: normal;
						}
						.numberValue{
							flex: 2;
							.hint {
							  font-size: 12px;
							  color: #f56c6c;
							  animation: fadeIn 0.3s;
							}
							@keyframes fadeIn {
							  from { opacity: 0; }
							  to { opacity: 1; }
							}
						}
					}
					.unit{
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
						.star{
							width: 18rpx;
							height: 52rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #F95957;
							line-height: 52rpx;
							text-align: left;
							font-style: normal;
						}
						.numberText{
							flex: 1;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 32rpx;
							color: #666666;
							line-height: 65rpx;
							text-align: left;
							font-style: normal;
						}
						.numberValue{
							flex: 2;
							.hint {
							  font-size: 12px;
							  color: #f56c6c;
							  animation: fadeIn 0.3s;
							}
							@keyframes fadeIn {
							  from { opacity: 0; }
							  to { opacity: 1; }
							}
						}
					}
	  				.time{
	  					flex: 1;
	  					display: flex;
	  					justify-content: center;
	  					align-items: center;
	  					.star{
	  						width: 18rpx;
	  						height: 52rpx;
	  						font-family: PingFangSC, PingFang SC;
	  						font-weight: 500;
	  						font-size: 32rpx;
	  						color: #F95957;
	  						line-height: 52rpx;
	  						text-align: left;
	  						font-style: normal;
	  					}
	  					.timeText{
	  						flex: 1;
	  						font-family: PingFangSC, PingFang SC;
	  						font-weight: 400;
	  						font-size: 32rpx;
	  						color: #666666;
	  						line-height: 65rpx;
	  						text-align: left;
	  						font-style: normal;
	  					}
	  					.timeValue{
	  						flex: 2;
							.hint {
							  font-size: 12px;
							  color: #f56c6c;
							  animation: fadeIn 0.3s;
							}
							@keyframes fadeIn {
							  from { opacity: 0; }
							  to { opacity: 1; }
							}
	  					}
	  				}
	  				.number{
	  					flex: 1;
	  					display: flex;
	  					justify-content: center;
	  					align-items: center;
	  					.star{
	  						width: 18rpx;
	  						height: 52rpx;
	  						font-family: PingFangSC, PingFang SC;
	  						font-weight: 500;
	  						font-size: 32rpx;
	  						color: #F95957;
	  						line-height: 52rpx;
	  						text-align: left;
	  						font-style: normal;
	  					}
	  					.numberText{
	  						flex: 1;
	  						font-family: PingFangSC, PingFang SC;
	  						font-weight: 400;
	  						font-size: 32rpx;
	  						color: #666666;
	  						line-height: 65rpx;
	  						text-align: left;
	  						font-style: normal;
	  					}
	  					.numberValue{
	  						flex: 2;
							.hint {
							  font-size: 12px;
							  color: #f56c6c;
							  animation: fadeIn 0.3s;
							}
							@keyframes fadeIn {
							  from { opacity: 0; }
							  to { opacity: 1; }
							}
	  					}
	  				}
					.phone{
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
						.star{
							width: 18rpx;
							height: 52rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #F95957;
							line-height: 52rpx;
							text-align: left;
							font-style: normal;
						}
						.timeText{
							flex: 1;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 32rpx;
							color: #666666;
							line-height: 65rpx;
							text-align: left;
							font-style: normal;
						}
						.timeValue{
							flex: 2;
							.error-text {
							  font-size: 12px;
							  color: #f56c6c;
							  animation: fadeIn 0.3s;
							}
						}
					}
	  			}
	  			.subscribeButton{
	  				box-sizing: border-box;
	  				padding: 20rpx 10rpx;
	  				width: 640rpx;
	  				height: 100rpx;
	  				.custom-style{
	  					background: linear-gradient( 180deg, #6FA4FD 0%, #468BFA 100%);
	  					border-radius: 16rpx;
	  					font-family: PingFangSC, PingFang SC;
	  					font-weight: 400;
	  					font-size: 34rpx;
	  					color: #FFFFFF;
	  					line-height: 48rpx;
	  					text-align: right;
	  					font-style: normal;
	  				}
	  			}
	  		}
	  	}
    }
  
  }
}

/* 协议弹窗样式 */
.agreement-popup {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.agreement-title {
		font-size: 36rpx;
		height: 80rpx;
		line-height: 80rpx;
		// padding-top: 20rpx;
		text-align: center;
		font-weight: bold;
		color: white;
		background: #468BFA;
		border-top-right-radius: 22rpx;
		border-top-left-radius: 22rpx;
		margin-bottom: 30rpx;
	}
	.agreement-content {
		box-sizing: border-box;
		padding: 20rpx;
		width: 720rpx;
		background: #f9f9f9;
		border-radius: 20rpx;
		.agreement-rule {
			font-size: 25rpx;
			line-height: 2;
			color: #333;
		}
	}
	.countdown {
		text-align: center;
		font-size: 25rpx;
		color: #888EA6;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		.countdown-number {
			color: #468BFA;
			font-weight: bold;
		}
	}
	.next-button {
		width: 494rpx;
		height: 72rpx;
		background: #ccc;
		border-radius: 16rpx;
		color: white;
		border: none;
		font-size: 32rpx;
		margin-bottom: 30rpx;
	}
	.next-button.active {
		background: linear-gradient(180deg, #6FA4FD 0%, #468BFA 100%);
	}
}
/* 预约成功弹窗样式 */
.popupBox{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	image{
		width: 280rpx;
		height: 280rpx;
		margin: 20rpx 147rpx 0rpx 147rpx;
	}
	.title1{
		margin: 8rpx 223rpx 16rpx 223rpx;
		width: 128rpx;
		height: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #03050D;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
	}
	.title2{
		margin: 0 auto 48rpx;
		width: 252rpx;
		height: 36rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #888EA6;
		line-height: 36rpx;
		text-align: right;
		font-style: normal;
	}
	.custom-style{
		margin: 0 auto 40rpx;
		width: 494rpx;
		height: 72rpx;
		background: linear-gradient( 180deg, #6FA4FD 0%, #468BFA 100%);
		border-radius: 16rpx;
	}
}

/* 预约时间弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 30rpx;
}
.container-box {
  border-radius: 30rpx;
  width: 100%;
}
.header {
  background: #4a6bdf;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  color: white;
  padding: 10rpx;
  text-align: center;
  position: relative;
  .header-title {
    font-weight: 500;
    font-size: 35rpx;
    margin-bottom: 5rpx;
  }
  .header-subtitle {
    font-size: 23rpx;
    opacity: 0.85;
  }
}

.date-section {
  background: white;
  padding: 20rpx;
  border-bottom: 1px solid #eaeef2;
  position: relative;
}

.date-title {
  background: white;
  font-size: 30rpx;
  color: #444;
  margin-bottom: 15rpx;
  display: flex;
  align-items: center;
}

.date-picker {
  display: flex;
  gap: 12rpx;
  overflow-x: auto;
  padding: 5rpx 0 18rpx;
  scrollbar-width: none;
  // white-space: nowrap;
  // width: 100%;
  // flex-wrap: nowrap;
}

.date-item {
  flex: 0 0 auto;
  width: 64rpx;
  height: 76rpx;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f8f9fd;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.08);
  }
  
  &.active {
	background: #4a6bdf;
    color: white;
    box-shadow: 0 5px 12px rgba(74, 107, 223, 0.3);
  }
  
  &.disabled {
    background: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
    
    &::after {
      content: "";
      position: absolute;
      width: 140%;
      height: 2px;
      background: #ff4757;
      transform: rotate(-45deg);
      top: 50%;
      left: -20%;
    }
  }
  
  .weekday {
    font-size: 24rpx;
    margin-bottom: 5rpx;
  }
  
  .day {
    font-size: 24rpx;
    font-weight: 500;
  }
  
  .date-num {
    font-size: 24rpx;
    margin-top: 3rpx;
    opacity: 0.7;
  }
}

.time-section {
  background: white;
  padding: 20rpx;
}

.time-title {
  font-size: 30rpx;
  color: #444;
  margin-bottom: 15rpx;
  display: flex;
  align-items: center;
}

.period {
  margin-bottom: 10rpx;
}

.period-title {
  font-size: 27rpx;
  color: #555;
  margin-bottom: 10rpx;
  display: flex;
  align-items: center;
  font-weight: 500;
  
  &::before {
    content: "";
    width: 10rpx;
    height: 25rpx;
    background: #4a6bdf;
    margin-right: 10px;
    border-radius: 2px;
  }
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15rpx;
}

.time-btn {
  padding: 15rpx;
  border: 1.5px solid #e0e4eb;
  border-radius: 10px;
  background: #f8f9fd;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
  
  &:hover {
    border-color: #4a6bdf;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.06);
  }
  
  &.active {
    background: #4a6bdf;
    color: white;
    border-color: #4a6bdf;
    box-shadow: 0 5px 12px rgba(74, 107, 223, 0.25);
  }
  
  &.disabled {
    background: #f9f9f9;
    color: #ccc;
    cursor: not-allowed;
    border-color: #eaeaea;
  }
  .booked-text {
	font-size: 25rpx;
	color: #ccc;
	margin-left: 8rpx;
	white-space: nowrap;
   }
}

.action-section {
  padding: 15rpx;
  background: #f8f9fd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eaeef2;
}

.selected-time-display {
  font-size: 25rpx;
  color: #555;
  text {
    color: #4a6bdf;
    font-weight: 500;
  }
}

.confirm-btn {
  width: 200rpx;
  height: 70rpx;
  text-align: center;
  line-height: 70rpx;
  background: #4a6bdf;
  color: white;
  border: none;
  border-radius: 10rpx;
  font-size: 30rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(74, 107, 223, 0.3);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(74, 107, 223, 0.4);
  }
  
  &:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }
}

.cancel-btn {
  width: 200rpx;
  height: 70rpx;
  text-align: center;
  line-height: 70rpx;
  background: #f8f9fd;
  color: #666;
  border: 1px solid #e0e4eb;
  border-radius: 10rpx;
  font-size: 30rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-right: 80rpx;
  
  &:hover {
    background: #eaeef2;
  }
}

.holiday-note {
  text-align: center;
  padding: 12rpx;
  font-size: 23rpx;
  color: #ff4757;
  background: #fff5f5;
  border-top: 1px solid #ffecee;
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
}

.tooltip {
  position: relative;
  display: inline-block;
  
  .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #ff4757;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -70px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
    
    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #ff4757 transparent transparent transparent;
    }
  }
  
  &:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

@media (max-width: 600px) {
  .time-slots {
    grid-template-columns: 1fr;
  }
  
  .date-item {
    width: 58px;
    height: 70px;
  }
  
  .action-section {
    flex-direction: column;
    gap: 15px;
    
    .buttons {
      display: flex;
      gap: 10px;
    }
  }
}

</style>